﻿@{
    ViewBag.Title = "Index";
}


<div class="row">
    <div class="col-xs-12">
        <p>
            <button class="btn btn-sm btn-primary" id="btnNew">新增用户</button>
            <input type="text"/>
            <button class="btn btn-sm btn-success" id="btnQuery">查询</button>
        </p>
        @*<div class="table-header">
            用户列表
        </div>*@
        <div class="table-responsive">
            <table id="sample-table-2" class="table table-striped table-bordered table-hover">
            </table>
        </div>
    </div>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close"
                        data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    模态框（Modal）标题
                </h4>
            </div>
            <div class="modal-body">
                在这里添加一些文本
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">
                    关闭
                </button>
                <button type="button" class="btn btn-primary">
                    提交更改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
    @section inlineScript
{

        <script src='@Url.Content("~/Content/ace/js//jquery.dataTables.min.js")'></script>
        <script src='@Url.Content("~/Content/ace/js/jquery.dataTables.bootstrap.js")'></script>

        <script type="text/javascript">
            $(document).ready(function () {
                $('#btnNew').on('click', function () {
                    $('#myModal').modal();//{ backdrop: 'static', keyboard: false });
                });

                $("#sample-table-2").dataTable({
                    "bLengthChange": false, //改变每页显示数据数量
                    "bFilter": false, //过滤功能
                    "bProcessing": false, // 是否显示取数据时的那个等待提示
                    "bServerSide": true,//这个用来指明是通过服务端来取数据
                    "sAjaxSource": "http://localhost:30837/api/bases/user/list",//这个是请求的地址
                    "fnServerData": retrieveData, // 获取数据的处理函数
                    "aoColumns": [
                        { "sTitle": "Engine" },
                        { "sTitle": "Browser" },
                        {
                            "sTitle": "Grade",
                            "sClass": "center",
                            "fnRender": function (obj) {
                                var sReturn = obj.aData[obj.iDataColumn];
                                if (sReturn == true) {
                                    sReturn = "<b>yes</b>";
                                }
                                return 'no';
                            }
                        },
                        { "sTitle": "操作" }
                    ],
                    "aoColumnDefs": [{ "bSortable": false, "aTargets": [0, 1, 2, 3] }]
                });
            });

            // 3个参数的名字可以随便命名,但必须是3个参数,少一个都不行
            function retrieveData(sSource, aoData, fnCallback) {
                $.ajax({
                    url: sSource,//这个就是请求地址对应sAjaxSource
                    //data: { "aoData": JSON.stringify(aoData111) },//这个是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数
                    type: 'get',
                    dataType: 'json',
                    async: false,
                    success: function (result) {
                        if (result.isSuccess) {
                            //把返回的数据传给这个方法就可以了,datatable会自动绑定数据的
                            var rows = new Array();
                            for (var index = 0; index < result.data.items.length; index++) {
                                rows.push([
                                    result.data.items[index].account,
                                    result.data.items[index].name,
                                    result.data.items[index].isEnabled,
                                    "<a href='#'>op</a>"
                                ]);
                            }
                            fnCallback({
                                sEcho: aoData[0].value,
                                iTotalRecords: result.data.total,
                                iTotalDisplayRecords: result.data.total,
                                aaData: rows
                            });
                        }
                    },
                    error: function (msg) {
                    }
                });
            }
        </script>
    }
